<template>
  <view class="success-container">
    <!-- 头部导航 -->
    <view class="header">
      <view class="back-icon" @click="goBack">
        <text>←</text>
      </view>
      <view class="header-title">预定结果</view>
    </view>
    
    <!-- 成功状态 -->
    <view class="success-status">
      <view class="success-icon">
        <text>✓</text>
      </view>
      <view class="success-text">预定成功</view>
    </view>
    
    <!-- 按钮操作区 -->
    <view class="action-buttons">
      <button class="cancel-btn" @click="cancelBooking">取消预定</button>
      <button class="modify-btn" @click="showModifyPopup">修改预定</button>
    </view>
    
    <!-- 房间信息 -->
    <view class="info-section">
      <view class="info-title">
        <text class="icon">🏨</text>
        <text>房间信息</text>
      </view>
      
      <view class="info-list">
        <view class="info-item">
          <text class="item-label">房间号</text>
          <text class="item-value">{{roomNumber}}</text>
        </view>
        <view class="info-item">
          <text class="item-label">房间类型</text>
          <text class="item-value">{{roomType}}</text>
        </view>
        <view class="info-item">
          <text class="item-label">入住时间</text>
          <text class="item-value">{{checkInDate}}</text>
        </view>
        <view class="info-item">
          <text class="item-label">离店时间</text>
          <text class="item-value">{{checkOutDate}}</text>
        </view>
        <view class="info-item">
          <text class="item-label">入住人数</text>
          <text class="item-value">{{guestCount}}人</text>
        </view>
        <view class="info-item">
          <text class="item-label">联系电话</text>
          <text class="item-value">{{phoneNumber || '暂无'}}</text>
        </view>
      </view>
    </view>
    
    <!-- 入住人信息 -->
    <view class="info-section">
      <view class="info-title">
        <text class="icon">👤</text>
        <text>入住人信息</text>
      </view>
      
      <view class="guest-list">
        <view class="guest-item" v-for="(guest, index) in guests" :key="index">
          <view class="guest-info">
            <text class="guest-name">{{guest.name}}</text>
            <text class="guest-id">{{guest.phone || '未提供联系方式'}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, defineExpose } from 'vue';

// 页面参数数据
const orderNo = ref('CONF' + new Date().getTime().toString().substring(0, 10));
const roomNumber = ref('211');
const roomType = ref('双人间');
const checkInDate = ref('');
const checkOutDate = ref('');
const guestCount = ref(1);
const guests = ref([]);
const phoneNumber = ref('');

// 从页面参数中获取数据
onMounted(() => {
  const eventChannel = getOpenerEventChannel();
  eventChannel.on('bookingData', (data) => {
    if (data) {
      updateBookingData(data);
    }
  });
});

// 更新预订数据
const updateBookingData = (data) => {
  if (data) {
    if (data.orderNo) {
      orderNo.value = data.orderNo;
    }
    roomType.value = data.roomType || '双人间';
    checkInDate.value = data.checkInDate || data.startDate || '';
    checkOutDate.value = data.checkOutDate || data.endDate || '';
    phoneNumber.value = data.phoneNumber || '';
    
    if (data.guests && data.guests.length > 0) {
      guests.value = data.guests;
      guestCount.value = data.guests.length;
    }
  }
};

// 返回按钮功能
const goBack = () => {
  uni.reLaunch({
    url: '/pages/index/index',
    success: () => {
      // 等待页面加载完成后触发打开酒店住宿模态框
      setTimeout(() => {
        uni.$emit('openHotelModal');
      }, 500);
    }
  });
};

// 取消预定
const cancelBooking = () => {
  uni.showModal({
    title: '提示',
    content: '确认取消此预订吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({
          title: '取消中...'
        });
        
        // 模拟网络请求
        setTimeout(() => {
          uni.hideLoading();
          uni.showToast({
            title: '已取消预订',
            icon: 'success',
            duration: 2000
          });
          
          // 返回预订页面
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/accommodation/reser_index'
            });
          }, 2000);
        }, 1000);
      }
    }
  });
};

// 显示修改预定弹窗
const showModifyPopup = () => {
  // 首先跳转到修改页面
  modifyBooking();
};

// 修改预定（原来的页面跳转）
const modifyBooking = () => {
  // 准备需要传递的数据
  const modifyData = {
    roomType: roomType.value,
    startDate: checkInDate.value,
    endDate: checkOutDate.value,
    phoneNumber: phoneNumber.value,
    guests: guests.value
  };
  
  // 跳转到修改页面
  uni.navigateTo({
    url: '/pages/accommodation/modify',
    success: (res) => {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit('modifyData', modifyData);
    }
  });
};

// 获取事件通道
const getOpenerEventChannel = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const eventChannel = currentPage.getOpenerEventChannel();
  return eventChannel;
};

// 暴露方法给其他页面调用
defineExpose({
  updateBookingData
});
</script>

<style lang="scss">
.success-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  max-width: 750rpx;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding-bottom: 40rpx;
}

// 头部导航
.header {
  position: relative;
  height: 90rpx;
  background: linear-gradient(to right, #1E90FF, #4682B4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .back-icon {
    position: absolute;
    left: 30rpx;
    font-size: 40rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .header-title {
    font-size: 32rpx;
    font-weight: bold;
  }
}

// 成功状态
.success-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50rpx 0;
  background-color: #fff;
  
  .success-icon {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    background-color: #1E90FF;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
    
    text {
      font-size: 80rpx;
      line-height: 80rpx;
    }
  }
  
  .success-text {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

// 按钮操作区
.action-buttons {
  display: flex;
  padding: 30rpx;
  background-color: #fff;
  
  button {
    flex: 1;
    height: 80rpx;
    font-size: 28rpx;
    margin: 0 10rpx;
    border-radius: 40rpx;
    
    &.cancel-btn {
      background-color: #f5f5f5;
      color: #666666;
      border: none;
    }
    
    &.modify-btn {
      background-color: #ffffff;
      color: #1E90FF;
      border: 1px solid #1E90FF;
    }
  }
}

// 信息区块
.info-section {
  margin-top: 20rpx;
  background-color: #ffffff;
  
  .info-title {
    display: flex;
    align-items: center;
    padding: 25rpx 30rpx;
    border-bottom: 1px solid #f0f0f0;
    
    .icon {
      font-size: 32rpx;
      color: #1E90FF;
      margin-right: 10rpx;
    }
    
    text {
      font-size: 30rpx;
      font-weight: bold;
    }
  }
  
  .info-list {
    padding: 10rpx 30rpx;
    
    .info-item {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 0;
      font-size: 28rpx;
      border-bottom: 1px solid #f8f8f8;
      
      &:last-child {
        border-bottom: none;
      }
      
      .item-label {
        color: #999;
      }
      
      .item-value {
        color: #333;
      }
    }
  }
  
  .guest-list {
    .guest-item {
      padding: 20rpx 30rpx;
      border-bottom: 1px solid #f8f8f8;
      
      &:last-child {
        border-bottom: none;
      }
      
      .guest-info {
        display: flex;
        flex-direction: column;
        
        .guest-name {
          font-size: 30rpx;
          color: #333;
          margin-bottom: 10rpx;
        }
        
        .guest-id {
          font-size: 26rpx;
          color: #999;
        }
      }
    }
  }
}
</style>

<style>
/* 移动端预览样式 */
@media screen and (min-width: 768px) {
  body {
    background-color: #f0f0f0;
  }
  
  uni-page-body {
    max-width: 375px !important;
    margin: 0 auto !important;
    position: relative !important;
    min-height: 100vh !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  
  /* 弹窗移动端样式 */
  .modify-popup .uni-popup__wrapper {
    max-width: 375px !important;
    width: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}
</style> 